// #ifdef H5
import {h, render} from 'vue'
import AwMessage from "@/components/aw-message/aw-message.vue"

// #endif
interface MessageProps {
    content: string,
    color?: string,
    type?: 'success' | 'error' | 'warning' | 'info'
    duration?: number
    appDuration?: 'short' | 'long'
    icon?: string
    direction?: 'top' | 'bottom' | 'center',
    showIcon?: boolean,
    background?: string,
    rich?: boolean
}

/**
 * 消息提示参数,推荐在app端书写type值（type必须要开启rich属性!否则文字颜色不生效将跟随系统）
 * 默认当type存在时开启富文本
 * @param message 消息参数
 * @param {string} message.content 消息内容;
 * @param {string} message.color 消息颜色（app端暂不支持修改文字颜色）;
 * @param {'success' | 'error' | 'warning' | 'info'} message.type 消息类型
 * @param {number} message.duration 消息显示时间
 * @param {string} message.icon  消息图标 colorUi图标(app默认软件图标)
 * @param {'top' | 'bottom' | 'center'} message.directino 消息显示方向 top bottom(非H5失效)
 * @param {boolean} message.showIcon 是否显示图标 app端生效
 * @param {string} message.background 消息背景色(仅app生效,不传则为原生)
 * @param {boolean} message.rich 富文本(不传默认文本，传值则覆盖文本，开启富文本后，动画效果消失)
 *
 */
export const IMessage = (message: MessageProps) => {
    // #ifdef H5
    // 1、将组件通过h函数变成虚拟节点
    const VNode = h(AwMessage, {
        msg: message.content,
        color: message.color,
        type: message.type,
        duration: message.duration,
        icon: message.icon,
        direction: message.direction,
    })
    // 2、准备挂载节点
    const mountNode = document.createElement('div')
    document.body.appendChild(mountNode)

    // 3、通过render将虚拟节点挂载到挂载真实节点上
    render(VNode, mountNode)
    // #endif

    // #ifdef APP-PLUS
    function getTypeColor(): { color: string; bgColor: string, icon: string } {
        switch (message.type) {
            case "success":
                return {color: '#39c5bb', bgColor: '#EBF9F8', icon: '/static/msg-success.png'};
            case "error":
                return {color: '#F56C6C', bgColor: '#FEF0F0', icon: '/static/msg-error.png'};
            case "warning":
                return {color: '#E6A23C', bgColor: '#FFF6E6', icon: '/static/msg-warning.png'};
            case "info":
                return {color: '#909399', bgColor: '#F4F4F5', icon: '/static/msg-info.png'};
            default:
                return {color: '#000000', bgColor: '#f5f5f5', icon: '/static/app-msg.png'};
        }
    }

    const typeColor = getTypeColor()
    //如果没传就默认
    message.icon = message?.icon ? message.icon : '/static/app-msg.png'
    return plus.nativeUI.toast(
        message.type
            ? `<div style="color: ${typeColor.color};font-size: 14px;">${message.content}</div>`
            : message?.rich
                ? `<div style="color: ${typeColor.color};font-size: 14px;">${message.content}</div>`
                : message.content, {
            duration: message.appDuration,
            verticalAlign: 'top',
            icon: message?.showIcon ? message.type ? typeColor.icon : message.icon : '',
            iconHeight: '20px',
            iconWidth: '20px',
            background: message.type ? typeColor.bgColor : message?.background,
            style: 'inline',
            type: message.type ? 'richtext' : message?.rich ? 'richtext' : 'text',
        })
    // #endif
    // #ifndef H5
    uni.showModal({
        title: '提示',
        content: message.content,
        showCancel: false,
        success: function (res) {
            if (res.confirm) {
                console.log('用户点击确定')
            }
        }
    })
    // #endif
}